<style scoped>
  .flex-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-form>div {
    min-width: 546px;
    margin-bottom: 16px;
  }

  .flex-form .line {
    height: 20px;
    border-top: 1px solid #cacaca;
    width: 100%;
  }

  .flex-form .title {
    width: 100%;
    padding-left: 16px;
  }

  .dialog-form>div {
    margin-bottom: 8px;
  }

  .error-table {
    border: 1px solid #f56c6c;
  }

  .show-error {
    display: block;
    width: 100%;
    color: #f56c6c;
    margin-left: 16px;
  }

</style>
<template>
  <div class="tab_content">
    <div :class="(readonly?'read-only-form':'') + ' finance-class flex-form'">
      <div class="title">开发能力
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px" @click="formShow = true;resetForm('ruleForm')" v-if="!readonly">新增</el-button>
      </div>
      <el-table :data="devList" border style="margin: 0 16px 16px 16px" :class="{'error-table' : isError}">
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteDev(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="零件名称" prop="partsName"></el-table-column>
        <el-table-column label="OEM" prop="oem"></el-table-column>
        <el-table-column label="项目名称" prop="model"></el-table-column>
        <el-table-column label="开发软件" prop="software"></el-table-column>
        <el-table-column label="设计开发周期" prop="designCycle"></el-table-column>
        <el-table-column label="模具制作时间" prop="toolingCycle"></el-table-column>
        <el-table-column label="开发费用(万元)" prop="designCost"></el-table-column>
        <el-table-column label="快速样件提供时间" prop="fastSampleTiming"></el-table-column>
        <el-table-column label="备注" prop="notes"></el-table-column> -->

        <el-table-column label="同步开发产品名称" prop="partsName"></el-table-column>
        <el-table-column label="设计开发周期" prop="designCycle"></el-table-column>
        <el-table-column label="开发费用(万元)" prop="designCost"></el-table-column>
        <el-table-column label="备注" prop="notes"></el-table-column>
      </el-table>
      <div v-if="isError" style=" margin-bottom: 16px;" :class="{'show-error': isError}">请添加开发能力</div>

      <!--添加产品-->
      <dialog-ext title="新增" v-model="formShow" @submitForm="submitForm" @resetDialog="resetForm('ruleForm')" width="800px">
        <el-form :model="form" ref="ruleForm" label-width="140px" class="dialog-form">
          <!-- <el-form-item label="零件名称" prop="partsName">
            <el-input v-model="form.partsName"></el-input>
          </el-form-item>
          <el-form-item label="OEM" prop="oem">
            <el-input v-model="form.oem"></el-input>
          </el-form-item>
          <el-form-item label="项目名称" prop="model">
            <el-input v-model="form.model"></el-input>
          </el-form-item>
          <el-form-item label="开发软件" prop="software">
            <el-input v-model="form.software"></el-input>
          </el-form-item>
          <el-form-item label="设计开发周期" prop="designCycle">
            <el-input v-model="form.designCycle"></el-input>
          </el-form-item>
          <el-form-item label="模具制作时间" prop="toolingCycle">
            <el-input v-model="form.toolingCycle"></el-input>
          </el-form-item>
          <el-form-item label="开发费用(万元)" prop="designCost">
            <el-input v-model="form.designCost"></el-input>
          </el-form-item>
          <el-form-item label="快速样件提供时间" prop="fastSampleTiming">
            <el-input v-model="form.fastSampleTiming"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="notes">
            <el-input v-model="form.notes"></el-input>
          </el-form-item> -->
          <el-form-item label="同步开发产品名称" prop="partsName">
            <el-input v-model="form.partsName"></el-input>
          </el-form-item>
          <el-form-item label="设计开发周期" prop="designCycle">
            <el-input v-model="form.designCycle"></el-input>
          </el-form-item>
          <el-form-item label="开发费用(万元)" prop="designCost">
            <el-input v-model="form.designCost"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="notes">
            <el-input v-model="form.notes"></el-input>
          </el-form-item>
        </el-form>
      </dialog-ext>
    </div>
  </div>
</template>
<script>
  import DialogExt from '../../../common/dialog-ext/dialog-ext';
  export default {
    data() {
      return {
        form: {
          partsName: '',
          oem: '',
          model: '',
          software: '',
          designCycle: '',
          toolingCycle: '',
          designCost: '',
          fastSampleTiming: '',
          notes: ''
        },
        formShow: false,
        devList: [],
        isError: false
      }
    },
    components: {
      DialogExt
    },
    created() {},
    props: {
      readonly: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      initData(vendorId) {
        let _this = this;
        this.axios.post(this.lib.config.host.vendorMgt + '/vendormgt/questionary/vdExploreCapacity/query/' + vendorId).then(
          (res) => {
            if (res.data.resultMap.vdExploreCapacityList instanceof Array && res.data.resultMap.vdExploreCapacityList
              .length > 0) {
              self.devList = [];
              res.data.resultMap.vdExploreCapacityList.forEach((item) => {
                let tempData = {};
                for (let key in _this.form) {
                  if (item[key]) {
                    tempData[key] = item[key];
                  }
                }
                _this.devList.push(tempData);
              });
            }
          });
      },
      deleteDev(index) {
        this.devList.splice(index, 1);
      },
      submitForm(callBack) {
        this.devList.push(JSON.parse(JSON.stringify(this.form)));
        this.resetForm('ruleForm');
        callBack(true);
      },
      resetForm(ref) {
        if (this.$refs[ref])
          this.$refs[ref].resetFields();
      },
      getData(isCheck) {
        return new Promise((resolve, reject) => {
          resolve({
            data: {
              vdExploreCapacityJsonStr: JSON.stringify(this.devList)
            },
            check: true
          });
        });
      },
      checkList() {
        let flag = true;
        if (this.devList.length === 0) {
          this.isError = true;
          flag = false;
        } else {
          this.isError = false;
        }
        return flag;
      }
    }
  }

</script>
